<template>
  <view class="fen-box">
    <view class="fenb-box">
      <!-- 背景 -->
      <view class="fe-js">
        <jianbianVue></jianbianVue>
      </view>

      <view class="back">
        <view class="backl-k">

        </view>
        <view class="back-l">
          <u-icon name="arrow-left" size="60rpx" @click="backk"></u-icon>
        </view>
        <view class="search">
          <!-- 搜索 -->
          <view class="">
            <u-search :show-action="false" :animation="false"></u-search>
            <button class="but">搜索</button>
          </view>
          <!-- 宫格 -->
          <view class="grid">
            <u-grid :col="5" :border="false">
              <u-grid-item v-for="(item,index) in grid" :key="index">
                <image :src="item.image" mode="" style="width: 60px; height: 60px;"></image>
                <view class="grid-text">{{item.text}}</view>
              </u-grid-item>
            </u-grid>
          </view>
          <!-- 侧导航 -->
          <view class="ch">
            <view class="menu">
              <view class="me">
                <view class="textt" v-for="(item,index) in list" :key="index" @click="changeCu(index)">
                  {{item.textt}}
                </view>
              </view>
              <view class="me-right">
                <swiper vertical="true" disable-touch="true" :current="curret" class="swiper">
                  <swiper-item>
                    <scroll-view scroll-y="true">
                      <image src="../../static/xian.png" mode=""></image>
                      <view class="jshw-box" v-for="(item,index) in hawu" :key="index" style="margin: 10px 0px;" @click="gopr">
                        <chwpVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
                          :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
                          :title9="item.title9" :title8="item.title8">
                        </chwpVue>
                      </view>
                    </scroll-view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">热销爆款</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">新品</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">绿叶菜</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">番茄</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">茄果</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">玉米</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">花菜</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">豆制品</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">菌菇</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">有机蔬菜</view>
                  </swiper-item>
                  <swiper-item>
                    <view class="swiper-item" style="background-color: salmon;height: 100%;">进口蔬菜</view>
                  </swiper-item>
                </swiper>
                <!-- <image src="../../static/xian.png" mode=""></image>
                <view class="jshw-box" v-for="(item,index) in hawu" :key="index" style="margin: 10px 0px;">
                  <chwpVue :title1="item.title1" :imageurl="item.imageurl" :title2="item.title2" :title3="item.title3"
                    :title4="item.title4" :title6="item.title6" :title7="item.title7" :title5="item.title5"
                    :title9="item.title9" :title8="item.title8">
                  </chwpVue>
                </view> -->
              </view>
            </view>
          </view>
          <!--  -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import jianbianVue from '../../compoents/jianbian/jianbian.vue'
  import chwpVue from '../../compoents/chwp/chwp.vue'
  export default {
    components: {
      jianbianVue,
      chwpVue
    },
    data() {
      return {
        curret:'',
        list: [{
            textt: '推荐'
          },
          {
            textt: '热销爆款'
          },
          {
            textt: '新品'
          },
          {
            textt: '绿叶菜'
          },
          {
            textt: '番茄'
          },
          {
            textt: '茄果'
          },
          {
            textt: '玉米'
          },
          {
            textt: '花菜'
          },
          {
            textt: '豆制品'
          },
          {
            textt: '菌菇'
          },
          {
            textt: '有机蔬菜'
          },
          {
            textt: '进口蔬菜'
          },
        ],

        hawu: [{
            imageurl: require('../../static/包子.png'),
            title1: '江苏无锡香菇猪肉包',
            title2: "猪肉肥美",
            title3: "鲜甜嫩软",
            title4: "多汁美味",
            title5: "多汁香嫩",
            title6: "8.79",
            title7: "笼",
            title9: "券",
            title8: "减10元"
          },
          {
            imageurl: require('../../static/西兰花.png'),
            title1: '浙江临海西兰花',
            title2: "基地直供",
            title3: "绿色培植",
            title4: "新鲜采摘",
            title5: "绿色新鲜",
            title6: "4.79",
            title7: "斤",
            title9: "券",
            title8: "减10元"
          },
          {
            imageurl: require('../../static/西红柿.png'),
            title1: '云南高山大西红柿',
            title2: "鲜嫩多汁",
            title3: "软甜爽口",
            title4: "入口美味",
            title5: "美味多汁",
            title6: "2.44",
            title7: "斤",
            title9: "券",
            title8: "减10元"
          },
          {
            imageurl: require('../../static/土豆.png'),
            title1: '宁夏西吉县马铃薯',
            title2: "基地直供",
            title3: "绿色培植",
            title4: "新鲜采摘",
            title5: "绿色新鲜",
            title6: "3.21",
            title7: "斤",
            title9: "券",
            title8: "减10元"
          }
        ],
        // 宫格
        grid: [{
          image: '../../static/水果.png',
          text: '水果',
        }, {
          image: '../../static/蔬菜.png',
          text: '蔬菜',
        }, {
          image: '../../static/肉类.png',
          text: '肉类',
        }, {
          image: '../../static/海鲜.png',
          text: '海鲜',
        }, {
          image: '../../static/熟食.png',
          text: '熟食',
        }, ]
      }
    },
    methods: {
      gopr(){
        uni.navigateTo({
          url:'/pages/product/product'
        })
      },
      backk() {
        uni.switchTab({
          url:'/pages/index/index'
        })
      },
      changeCu(index){
        console.log(index);
        this.curret=index
      }
    }
  }
</script>

<style lang="scss">
  .fen-box {
    .fenb-box {
      height: 100vh;
      .fe-js {
        z-index: -999;
      }

      .back {
        width: 90%;
        margin: auto;
        position: relative;

        .backl-k {
          height: var(--status-bar-height);
        }

        .back-l {
          position: absolute;
          top: -140px;
          left: 10px;
        }

        .search {
          width: 100%;

          height: 100rpx;
          position: relative;
          position: absolute;
          top: -100px;

          .but {
            background-color: #49ba7c;
            color: white;
            font-size: 25rpx;
            width: 150rpx;
            height: 50rpx;
            line-height: 50rpx;
            border-radius: 25rpx;
            position: absolute;
            top: 3px;
            right: 5px;
          }

          .grid {
            margin-top: 20px;

            .grid-text {
              font-size: 28rpx;
              margin-top: 4rpx;
            }
          }

          .ch {
            width: 100%;
            height: 100vh;
            margin-bottom: 50px;

            .menu {
              width: 100%;
              display: flex;
              justify-content: space-between;

              .me {
                width: 25%;
                background-color: rgba(132, 132, 132, 0.1);
                text-align: center;

                .textt {
                  width: 100%;
                  margin: 10rpx 0rpx;
                  height: 90rpx;
                  line-height: 90rpx;
                  color: silver;
                  .buttonn{
                    border: #f2f2f2;
                    background-color: #f2f2f2;
                    font-size: 12px;
                  }
                }

                .textt:hover {
                  width: 100%;
                  margin: 10rpx 0rpx;
                  height: 90rpx;
                  line-height: 90rpx;
                  color: #49ba7c;
                  font-weight: bolder;
                }
              }

              .me-right {
                width: 70%;
                height: 100vh;
                .swiper{
                  height: 100%;
                }
                image {
                  width: 100%;
                  height: 180rpx;
                }
              }
            }
          }
        }
      }

    }

  }
</style>